<template>
    <div class="about">
        <el-row>
            <el-col :span="6"><el-input v-model="typename" size="mini" placeholder="请输入车辆款式名称"></el-input></el-col>
            <el-col :span="6"><el-button type="primary" @click="search"  size="mini" icon="el-icon-search">搜索</el-button>
            &nbsp;<el-button type="primary"  size="mini" icon="el-icon-circle-plus" @click="handleAdd">添加</el-button></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="车辆款式编号"
                        v-if="false">
                </el-table-column>
                <el-table-column
                        prop="typename"
                        label="车辆款式">
                </el-table-column>
                <el-table-column
                        prop="speedBox"
                        label="变速箱类型">
                </el-table-column>
                 <el-table-column
                        prop="tankCapacity"
                        label="油箱容量">
                </el-table-column>
                <el-table-column
                        prop="displacement"
                        label="排量">
                </el-table-column>
                <el-table-column
                        prop="fcphk"
                        label="百公里油耗">
                </el-table-column>
                <el-table-column
                        prop="seating"
                        label="座位数">
                </el-table-column>
                <el-table-column
                        prop="airSuction"
                        label="进气方式">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--新增/修改 Form -->
            <el-dialog title="车辆管理" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="车辆款式" :label-width="formLabelWidth">
                        <el-input v-model="form.typename" placeholder="车辆款式" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="变速箱类型" :label-width="formLabelWidth">
                        <el-select v-model="form.speedBox" placeholder="请选择">
                            <el-option label="自动档" value="自动档"></el-option>
                            <el-option label="手动档" value="手动档"></el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="油箱容量" :label-width="formLabelWidth">
                        <el-input v-model="form.tankCapacity" placeholder="油箱容量" auto-complete="off"></el-input>
                    </el-form-item>
                     <el-form-item label="排量" :label-width="formLabelWidth">
                        <el-input v-model="form.displacement" placeholder="排量" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="百公里油耗" :label-width="formLabelWidth">
                        <el-input v-model="form.fcphk" placeholder="百公里油耗" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="座位数" :label-width="formLabelWidth">
                        <el-input v-model="form.seating" placeholder="座位数" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="进气方式" :label-width="formLabelWidth">
                        <el-input v-model="form.airSuction" placeholder="进气方式" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveInfo">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
        <!--分页插件-->
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                    :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
               tableData:[],
                currentPage:1,//当前页面，默认1
                pageSize:5,//每页显示条数
                total:100,//分页总数量，默认值随便写，初始化时赋予新值
                dialogFormVisible:false,
                formLabelWidth: '120px',
                form:{},
                typename:''
                };
      },
      created:function(){
               //初始化
                this.loadData();
            },
            methods:{
                 //加载数据
                loadData(){
                   //动态菜单请求
                          this.$http.post("/api/cars/carTypeConfigDetails/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,{
                                 typename:this.typename  
                                   }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.tableData = response.data.data.list;
                                                  this.total = response.data.data.total;
                                              }
                                })
                    
                },
                //各种绑定事件方法
                //每页数量发生变化
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
                },
                //当前页发生变化
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage=val;
                    this.loadData();
                },
                //查询方法
                search(){
                   this.loadData();
                },
                //处理添加
                handleAdd(){
                    //清空原来form
                    this.form={};
                    //更新显示名称
                    this.title="门店添加";
                    //对话框显示
                    this.dialogFormVisible=true;
                },
                //处理编辑（弹出部门更新对话框）
                handleEdit(index, row) {
                    console.log(index, row);
                    this.form=JSON.parse(JSON.stringify(row));
                    // this.form=row;
                    //更新显示名称
                    this.title="门店更新";
                    //对话框显示
                    this.dialogFormVisible=true;
                },

                //提交表单数据（添加或者更新）
                saveInfo(){
                    var _this = this;
                    var  url ='/api/cars/carTypeConfigDetails/update';
                    if(this.form.id==''||this.form.id==null){
                    url="/api/cars/carTypeConfigDetails/insert"
                }
                _this=this;
                //提交方法
                this.$http.post(url, this.form)
                    .then(function (response) {
                        console.log(response);
                        //提交成功
                        if(response.data.code==2000){
                            //关闭弹出框
                            _this.dialogFormVisible=false;
                            //提示更新成功
                            _this.$message({
                                //  message: '恭喜你，这是一条成功消息',
                                message: response.data.message,
                                type: 'success'
                            });
                            //重新加载数据
                            _this.loadData();
                            }else {
                                _this.$message.error(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            _this.$message.error('错了哦，这是一条错误消息');
                        });
                    },
                    handleDelete(index, row) {
                        var _this = this;
                        console.log(index, row);
                        _this=this;
                        //确认弹框
                        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            //执行删除
                        this.$http.delete('/api/cars/carTypeConfigDetails/deleteById?id='+row.id)
                            .then(function (response) {
                                //判断删除是否成功
                                 if(response.data.code==2000){
                                     //提示
                                     _this.$message({
                                         type: 'success',
                                         message: '删除成功!'
                                     });
                                     //重新加载数据
                                     _this.loadData();
                                 }else {
                                     _this.$message.error(response.data.message);
                                 }
                            })
                            .catch(function (error) {
                                //失败处理
                                console.log(error);
                                _this.$message.error('删除失败!');
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        });
                    },
            }
    
}
</script>
<style>

</style>